<template lang="pug">
  .SocialDetailModal
    Modal(
      v-model="isShowSocialDetailModal"
      :title="socialDetailTitle"
      class-name="vertical-center-modal"
      width="70%"
    )
      Row.mb-20.line-h-34
        Col(span="12") 参保编号：{{securityNO}}
        Col(span="12") 参保方案：{{planName}}
        Col(span="12") 参保时间：{{$moment(addDeclareDate).format('YYYY-MM-DD')}}
        Col(span="12") 申报工资：{{declareSalary}}
      Table.beautiful-table(:columns="setThead" :data="tableData" :stripe="true")
        template(slot-scope="{ row, index }" slot="leftnav")
          .text-center(v-if="index === 0") 最低基数
          .text-center(v-if="index === 1") 最高基数
          .text-center(v-if="index === 2") 缴纳基数
          .text-center(v-if="index === 3") 缴纳比例
          .text-center(v-if="index === 4") 缴纳金额
</template>

<script>
import { Common } from '@/utils/common.js'
import { EmployeeInsuredApi } from '@/api/EmployeeInsured.api.js'
import _cloneDeep from 'clone-deep'
import { SocialDetailThead } from '../tableHead.js'

export default {
  name: 'SocialDetailModal',

  watch: {
  },

  props: [],

  computed: {
  },

  data () {
    return {
      socialDetailTitle: '',
      id: null,
      securityNO: null,
      addDeclareDate: null,
      planName: null,
      declareSalary: null,
      isShowSocialDetailModal: false,
      thead: _cloneDeep(SocialDetailThead),
      tableData: [],
      setThead: [],
      // details: []
    }
  },

  mounted () {
  },

  methods: {
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      this.setThead = [{ title: '', key: 'null', width: 120, slot: 'leftnav', fixed: 'left' }]
      let res = await EmployeeInsuredApi.getDetail({id: this.id})
      console.log('社保明细res: ', res)
      if (res.status === 200 && res.data.success) {
        if (res.data.data.details) {
          var details = res.data.data.details
          var tempMinAmountObj = {}
          var tempMaxAmountObj = {}
          var tempBaseAmountObj = {}
          var tempPercentObj = {}
          var tempTotalAmountObj = {}
          details.map(item => {
            let str = ''
            if (item.company) {
              Object.keys(item.company).forEach(key => {
                var arr = ['minAmount', 'maxAmount', 'baseAmount', 'percent', 'totalAmount']
                if (arr.indexOf(key) !== -1) {
                  str = item.securityTypeCode + 'Company' + key
                  item[str] = item.company[key]
                  tempMinAmountObj = {...tempMinAmountObj, ...{ [item.securityTypeCode + 'CompanytotalAmount']: item.company.minAmount }}
                  tempMaxAmountObj = {...tempMaxAmountObj, ...{ [item.securityTypeCode + 'CompanytotalAmount']: item.company.maxAmount }}
                  tempBaseAmountObj = {...tempBaseAmountObj, ...{ [item.securityTypeCode + 'CompanytotalAmount']: item.company.baseAmount }}
                  tempPercentObj = {...tempPercentObj, ...{ [item.securityTypeCode + 'CompanytotalAmount']: item.company.percent + '%' }}
                  tempTotalAmountObj = {...tempTotalAmountObj, ...{ [item.securityTypeCode + 'CompanytotalAmount']: item.company.totalAmount }}
                }
              })
              var obj = {'title': item.securityTypeName + '(单位)', 'key': item.securityTypeCode + 'CompanytotalAmount', 'minWidth': item.securityTypeName.length > 3 ? 150 : 120}
              this.setThead.push(obj)
            }
            if (item.employee) {
              Object.keys(item.employee).forEach(key => {
                var arr = ['minAmount', 'maxAmount', 'baseAmount', 'percent', 'totalAmount']
                if (arr.indexOf(key) !== -1) {
                  str = item.securityTypeCode + 'Employee' + key
                  item[str] = item.employee[key]
                  tempMinAmountObj = {...tempMinAmountObj, ...{ [item.securityTypeCode + 'EmployeetotalAmount']: item.employee.minAmount }}
                  tempMaxAmountObj = {...tempMaxAmountObj, ...{ [item.securityTypeCode + 'EmployeetotalAmount']: item.employee.maxAmount }}
                  tempBaseAmountObj = {...tempBaseAmountObj, ...{ [item.securityTypeCode + 'EmployeetotalAmount']: item.employee.baseAmount }}
                  tempPercentObj = {...tempPercentObj, ...{ [item.securityTypeCode + 'EmployeetotalAmount']: item.employee.percent + '%' }}
                  tempTotalAmountObj = {...tempTotalAmountObj, ...{ [item.securityTypeCode + 'EmployeetotalAmount']: item.employee.totalAmount }}
                }
              })
              var obj = {'title': item.securityTypeName + '(个人)', 'key': item.securityTypeCode + 'EmployeetotalAmount', 'minWidth': item.securityTypeName.length > 3 ? 150 : 120}
              this.setThead.push(obj)
            }
            this.tableData = [tempMinAmountObj, tempMaxAmountObj, tempBaseAmountObj, tempPercentObj, tempTotalAmountObj]
          })
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>

</style>
